import {addListener, forEach, getImageNaturalSizes, getTransforms, removeClass, setData, setStyle} from "./utils";

export default {
    render() {
        this.initContainer()
        this.initViewer()
        this.initList()
    },
    initContainer() {
        this.containerData = {
            width: window.innerWidth,
            height: window.innerHeight
        }
    },
    initViewer() {
        this.viewerData = Object.assign({}, this.containerData)
    },
    initList() {
        const {element, list} = this
        const items = []
        forEach(this.images, (image, index) => {
            const {src} = image
            const item = document.createElement('li')
            const img = document.createElement('img')
            img.src = src
            img.alt = image.alt
            img.setAttribute('data-index', index)
            img.setAttribute('data-original-url', src)
            img.setAttribute('data-viewer-action', 'viewer')
            img.setAttribute('role', 'button')
            item.appendChild(img)
            list.appendChild(item)
            items.push(item)
        })
        this.items = items
        forEach(items, (item) => {
            const image = item.firstElementChild
            setData(image, 'filled', true)
            addListener(image, 'load', (event) => {
                this.loadImage(event)
            }, {once: true})
        })
    },
    renderList() {
        console.log('render', 'renderList')
        const width = this.items[0].offsetWidth || 30
        const outerWidth = width + 1
        setStyle(this.list, Object.assign({
            width: outerWidth * this.length
        }, getTransforms({
            translateX: ((this.viewerData.width - width) / 2) - outerWidth
        })))
    },
    resetList() {
        console.log('render', 'resetList')
        const {list} = this
        removeClass(list, 'viewer-transition')
        setStyle(list, getTransforms({translateX: 0}))
    },
    initImage(done) {
        console.log('render', 'initImage')
        const {image, viewerData} = this
        const footerHeight = this.footer.offsetHeight
        const viewerWidth = viewerData.width
        const viewerHeight = Math.max(viewerData.height - footerHeight, footerHeight)
        const oldImageData = this.imageData || {}
        let sizingImage

        sizingImage = getImageNaturalSizes(image, (naturalWidth, naturalHeight) => {
            const aspectRatio = naturalWidth / naturalHeight
            let width = viewerWidth
            let height = viewerHeight
            this.imageInitialzing = false
            if (viewerHeight * aspectRatio > viewerWidth) {
                height = viewerWidth / aspectRatio
            } else {
                width = viewerHeight * aspectRatio
            }
            width = Math.min(width * 0.9, naturalWidth)
            height = Math.min(height * 0.9, naturalHeight)
            const imageData = {
                naturalWidth,
                naturalHeight,
                aspectRatio,
                ratio: width / naturalWidth,
                width,
                height,
                left: (viewerWidth - width) / 2,
                top: (viewerHeight - height) / 2
            }
            const initialImageData = Object.assign({}, imageData)
            this.imageData = imageData
            this.initialImageData = initialImageData

            if (done) done()
        })
    },
    renderImage(done) {
        console.log('render', 'renderImage')
        const {image, imageData} = this
        setStyle(image, Object.assign({
            width: imageData.width,
            height: imageData.height,
            marginLeft: imageData.left,
            marginTop: imageData.top
        }, getTransforms(imageData)))
        if (done) {
            if (this.viewing || this.zooming) {
                addListener(image, 'transitionend', (event) => {
                    this.imageRendering = false
                    done()
                }, {once: true})
            } else {
                done()
            }
        }
    },
    resetImage() {
        console.log('render', 'resetImage')
        if (this.viewing || this.viewed) {
            const {image} = this
            if (this.viewing) {
                this.viewing.abort()
            }
            image.parentNode.removeChild(image)
            this.image = null
        }
    }
}
